<template>
  <div class="new-resume-app">
    <div class="box" style="width: 100%">
      <Markdown></Markdown>
      <a-steps :current="current">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
      <div class="steps-content">
        <div class="section">
          <h2>基本信息</h2>
          <div class="user-info">
            <p
              style="width: 40%"
              v-for="(filed, index) in Object.keys(userInfo)"
              :key="index"
            >
              <a-input v-model:value="userInfo[filed]" :placeholder="filed" />
            </p>
          </div>
        </div>
        <div class="section"></div>
        <div class="section">{{}}</div>
      </div>
      <div class="steps-action">
        <a-button v-if="current < steps.length - 1" type="primary" @click="next"
          >Next</a-button
        >
        <a-button
          v-if="current == steps.length - 1"
          type="primary"
          @click="$message.success('Processing complete!')"
        >
          Done
        </a-button>
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prev"
          >Previous</a-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import { saveOrUpdate } from "@/api/user";
import Markdown from "@/components/MarkDown.vue"
export default {
  components: {Markdown},
  setup() {
    const satate = reactive({
      formData: [
        {
          label: "姓名",
          filed: "name",
          type: "input",
        },
        {
          label: "年龄",
          filed: "age",
          type: "input",
        },
        {
          label: "城市",
          filed: "city",
          type: "input",
        },
        {
          label: "姓名",
          filed: "name",
          type: "input",
        },
        {
          label: "姓名",
          filed: "name",
          type: "input",
        },
        {
          label: "姓名",
          filed: "name",
          type: "input",
        },
        {
          label: "姓名",
          filed: "name",
          type: "input",
        },
      ],
      userInfo: {
        name: "",
        age: "",
        city: "",
        address: "",
        email: "",
        phone: "",
        weixin: "",
        qq: "",
        github: "",
        sex: "",
        description: "",
        gitee: "",
        job: "",
        avatar: "",
        signature: "",
      },
    });
    const current = ref(0);
    const next = () => {
      if (current.value === 0) {
        submitUserInfo();
      }
      current.value++;
    };
    const prev = () => {
      current.value--;
    };

    const submitUserInfo = async () => {
      const result = await saveOrUpdate(satate.userInfo);
      console.log(result);
    };

    return {
      current,
      steps: [
        {
          title: "First",
          content: "First-content",
        },
        {
          title: "Second",
          content: "Second-content",
        },
        {
          title: "Last",
          content: "Last-content",
        },
      ],
      next,
      prev,
      submitUserInfo,
      ...toRefs(satate),
    };
  },
};
</script>

<style lang="scss" scoped>
.new-resume-app {
  background: rgb(255, 255, 255);
  width: 100%;
  display: flex;
  justify-content: center;

  .box {
    width: 100%;
    padding: 30px;
    overflow: scroll;
  }
  .steps-content {
    overflow: scroll;
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    // min-height: 400px;
    text-align: center;
    padding-top: 30px;
    .section {
      width: 100%;
      overflow: scroll;
      .user-info {
        margin: 0 auto;
        width: 90%;
        padding: 10px auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
    }
  }

  .steps-action {
    margin-top: 24px;
  }
}
</style>